<template>
	<s-layout navbar="normal1" :bg-style="{color:'#15141F'}">
		<view class="nav ss-flex justify-start align-center ss-p-l-20"
			:style="{height: sheep.$platform.device.statusBarHeight + 'px',top:sheep.$platform.device.statusBarHeight + 'px'}">
			<uni-icons type="back" size="20" color="#464646" @click="onClickLeft"></uni-icons>
		</view>
		<view class="main-content">
			<view class="top-bar ss-flex-row ss-row-center ss-col-center">
				<image :src="sheep.$url.cdn(state.detail.img)" mode="aspectFill" class="detail-img"></image>
				<image :src="sheep.$url.cdn('/static/playlet/play-btn.png')" class="play-img" @click="play"></image>
			</view>
			<view class="content">
				<view class="title">{{state.detail.title}}</view>
				<view class="play-num ss-flex-row ss-m-t-14">
					<view class="play ss-flex-row ss-row-left ss-col-center ss-m-r-38">
						<image :src="sheep.$url.cdn('/static/playlet/collection-data.png')"
							style="width: 30rpx;height: 31rpx;margin-right: 10rpx;"></image>
						<view class="ji-txt">{{state.detail.episode_num}}集</view>
					</view>
					<view class="num ss-flex-row ss-row-left ss-col-center">
						<image :src="sheep.$url.cdn('/static/playlet/play.png')"
							style="width: 30rpx;height: 31rpx;margin-right: 10rpx;"></image>
						<view class="ji-txt">{{state.detail.play_num < 0 ? 0 : state.detail.play_num}}次</view>
					</view>
				</view>
				<view class="desc-card ss-m-t-50 ss-flex-col">
					<view class="d-txt">简介</view>
					<view class="d-content ss-m-t-12">
						<mp-html :content="state.detail.content"></mp-html>
					</view>
				</view>
			</view>
			<choice-video ref="choiceVideos" :data="state.episodes" :id="state.id" :sub_title="state.detail.sub_title" @upPlayNum="upPlayNum" @onDetailsClick="onDetailsClick"></choice-video>
			<you-like :data="state.likes" :skip="state.jump"></you-like>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		ref,
		reactive,
		computed,
		nextTick,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	import choiceVideo from './components/choice-video.vue';

	import youLike from './components/you-like.vue';

	import assNavbar from '@/components/ass-navbar.vue';
	
	let videoAd = null
	
	let choiceVideos = ref(null)
	
	const instance = getCurrentInstance().proxy
	const eventChannel = instance.getOpenerEventChannel();

	const state = reactive({
		id: 1,
		detail: {},
		likes: [],
		episodes: [],
		jump:false,
		sort:0,
	})

	onLoad((e) => {
		
		if (e.jump) {
			state.jump = e.jump ? true : false
		}

		if (e.id) {
			state.id = e.id;
			getDetial();
			getPlayletInfo();
			youLikeList();
		}
		loadVideoAd()
	})
	
	const upPlayNum = (data) => {
		state.detail.play_num += data.num
		eventChannel.emit('changeIndexNum', {
			num:data.num,
			id:state.id
		});
	}
	
	const onDetailsClick = (e) => {
		state.sort = e.sort
		if (videoAd) {
			videoAd.show().catch(() => {
				// 失败重试
				videoAd.load()
					.then(() => videoAd.show())
					.catch(err => {
						console.error('激励视频 广告显示失败', err)
					})
			})
		}
	}

	const bgSrc = computed(() => {
		return sheep.$url.cdn(state.detail.img);
	})

	const bgStyle = computed(() => {
		return `background-image: url(${bgSrc.value}); background-size: cover; background-position:0 0;`
	})

	function onClickLeft() {
		if (sheep.$router.hasHistory()) {
			sheep.$router.back();
		} else {
			if (firstPage === 'pages/store/shop') {
				sheep.$router.go('/pages/store/index');
			} else {
				sheep.$router.go('/pages/index/home');
			}
		}
	}

	function play() {
		choiceVideos.value?.changeIndex()
		sheep.$router.go('/pages/playlet/play?id=' + state.id + "&sort=1")
	}

	async function getDetial() {
		const res = await sheep.$api.playlet.detail({
			id: state.id
		});
		if (res.error == 0) {
			state.episodes = res.data
		}
	}

	async function youLikeList() {
		const res = await sheep.$api.playlet.youLike({
			id: state.id
		});
		if (res.error == 0) {
			state.likes = res.data;
		}
	}

	async function getPlayletInfo() {
		const res = await sheep.$api.playlet.playletInfo({
			id: state.id
		});
		if (res.error == 0) {
			state.detail = res.data;
		}
	}
	
	
	function loadVideoAd() {
		if (wx.createRewardedVideoAd) {
			videoAd = wx.createRewardedVideoAd({
				adUnitId: 'adunit-902822e5614acc45'
			})
			videoAd.onLoad(() => {
				console.log(123)
			})
			videoAd.onError((err) => {
				console.error('激励视频光告加载失败', err)
			})
			videoAd.onClose((res) => {
				console.log('onClose----------', res)
				if (res.isEnded) {
					if (sheep.$store('playlet').isPlay(state.id)) {
						sheep.$store('playlet').updatePlay(state.id, state.sort)
					} else {
						sheep.$store('playlet').setPlay(state.id, [state.sort])
					}
					sheep.$router.go('/pages/playlet/play', {
						id: state.id,
						sort: state.sort,
					})
				}
			})
		}
	}
	
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.nav {
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 99;
	}

	.top-bar {
		position: relative;
		width: 100%;
		height: 585rpx;

		.detail-img {
			width: 100%;
			height: 585rpx;
		}

		.play-img {
			position: absolute;
			width: 150rpx;
			height: 150rpx;
		}
	}

	.content {
		width: 100%;
		padding: 30rpx 32rpx 0;

		.title {
			font-family: Source Han Sans;
			font-size: 50rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			color: #FFFFFF;
		}
	}

	.ji-txt {
		font-family: Source Han Sans;
		font-size: 25rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #B2B2B2;
	}

	.d-txt {
		font-family: Source Han Sans;
		font-size: 36rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #B2B2B2;
	}

	.d-content {
		font-family: Source Han Sans;
		font-size: 26rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #B2B2B2;
	}
</style>